<!DOCTYPE html>
<html>
  <head>
    <title>Group</title>
    <script src="../node_modules/fabric/dist/fabric.js"></script>
    <script src="../dist/index.umd.js"></script>
  </head>
  <body>
    <div><canvas id="container" style="border: 1px solid #ccc" width="1024" height="768"></canvas></div>
    <script>
      let canvas = new fabric.Canvas('container', {
        preserveObjectStacking: true,
      });

      let entity1 = new fabric.Entity([], {
        width: 200,
        height: 100,
        fill: '#fee',
        stroke: '#000',
        padding: 5,
        linkable: true,
        title: 'User',
        fields: [
          {
            name: 'id',
            type: 'int',
            primary: true,
            generated: true,
          },
          {
            name: 'userName',
            type: 'varchar', //注意，这里的数据类型必须明确指定为数据库支持的类型，不能是 JS 语言中的类型，如 String。由于实现上的原因，此 Designer 目前还不能自动进行类型映射。
            length: 120,
          },
          {
            name: 'password',
            type: 'varchar', //注意，这里的数据类型必须明确指定为数据库支持的类型，不能是 JS 语言中的类型，如 String。由于实现上的原因，此 Designer 目前还不能自动进行类型映射。
            length: 256,
          },
          {
            name: 'age',
            type: 'int', //注意，这里的数据类型必须明确指定为数据库支持的类型，不能是 JS 语言中的类型，如 String。由于实现上的原因，此 Designer 目前还不能自动进行类型映射。
          },
          {
            name: 'email',
            type: 'varchar', //注意，这里的数据类型必须明确指定为数据库支持的类型，不能是 JS 语言中的类型，如 String。由于实现上的原因，此 Designer 目前还不能自动进行类型映射。
            length: 256,
          },
        ],
      });
      canvas.add(entity1);

      let relation1 = new fabric.Relation([500, 500, 300, 300], {
        stroke: '#f00',
        strokeWidth: 3,
        fill: '#f00',
        arrowType: 'end',
        relationType: 'many-to-many',
      });
      canvas.add(relation1);

      relation1.setLinkFrom(entity1);

      let entity2 = new fabric.Entity([], {
        width: 200,
        height: 100,
        fill: '#fee',
        stroke: '#000',
        padding: 5,
        linkable: true,
        title: 'Role',
        fields: [
          {
            name: 'id',
            type: 'int', //注意，这里的数据类型必须明确指定为数据库支持的类型，不能是 JS 语言中的类型，如 String。由于实现上的原因，此 Designer 目前还不能自动进行类型映射。
            primary: true,
            generated: true,
          },
          {
            name: 'roleName',
            type: 'varchar', //注意，这里的数据类型必须明确指定为数据库支持的类型，不能是 JS 语言中的类型，如 String。由于实现上的原因，此 Designer 目前还不能自动进行类型映射。
            length: 256,
          },
          {
            name: 'roleCode',
            type: 'varchar', //注意，这里的数据类型必须明确指定为数据库支持的类型，不能是 JS 语言中的类型，如 String。由于实现上的原因，此 Designer 目前还不能自动进行类型映射。
            length: 256,
          },
        ],
      });
      canvas.add(entity2);

      relation1.setLinkTo(entity2);

      console.log(canvas.toJSON());
      console.log(JSON.stringify(canvas));
      console.log(canvas.toEntityObject());
      console.log(JSON.stringify(canvas.toEntityObject()));
    </script>
  </body>
</html>
